<template>
  <div id="onepay">
    <div id="search_box">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="8">
            <span class="search-title">月份：</span>
            <el-date-picker
              v-model="choseMonth"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM"
              @change="choseMonths">
            </el-date-picker>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div id="table_box">
      <el-table
        border
        stripe
        :height="tableHeight"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          fixed
          label="日期"
          width="100">
          <template slot-scope="scope">
            {{ scope.row.year + '年' + scope.row.month + '月' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="postSalary"
          label="岗位工资">
        </el-table-column>
        <el-table-column
          prop="scaleSalary"
          label="薪级工资">
        </el-table-column>
        <el-table-column
          prop="highFixedWage"
          label="高定工资">
        </el-table-column>
        <el-table-column
          prop="reservedAreaSubsidy"
          label="保留地区补贴">
        </el-table-column>
        <el-table-column
          prop="subsidyAmountOfReservedAreas"
          label="保留地区补贴额">
        </el-table-column>
        <el-table-column
          prop="localSubsidy"
          label="地方津贴补贴">
        </el-table-column>
        <el-table-column
          prop="hardshipAndRemoteAllowance"
          label="艰苦边远津贴">
        </el-table-column>
        <el-table-column
          prop="localSubsidyAdd"
          label="补发地方津贴补贴">
        </el-table-column>
        <el-table-column
          prop="livingWageIncludedInPerformancePay"
          label="纳入绩效工资的活工资">
        </el-table-column>
        <el-table-column
          prop="postSubsidy"
          label="岗位津贴补贴">
        </el-table-column>
        <el-table-column
          prop="subsidiesForGrassrootsCadres"
          label="基层干部补贴">
        </el-table-column>
        <el-table-column
          prop="highTemperatureFeeAndHeatingFee"
          label="高温费/取暖费">
        </el-table-column>
        <el-table-column
          prop="payBack"
          label="补发工资">
        </el-table-column>
        <el-table-column
          prop="wagesPayable"
          label="应发工资">
        </el-table-column>
        <el-table-column
          prop="socialSecurityPaymentBase"
          label="社保缴费基数">
        </el-table-column>
        <el-table-column
          prop="endowmentInsurance"
          label="养老保险金">
        </el-table-column>
        <el-table-column
          prop="occupationalAnnuity"
          label="职业年金">
        </el-table-column>
        <el-table-column
          prop="medicalInsuranceBenefits"
          label="医疗保险金">
        </el-table-column>
        <el-table-column
          prop="unemploymentInsuranceBenefits"
          label="失业保险金">
        </el-table-column>
        <el-table-column
          prop="housingProvidentFund"
          label="住房公积金">
        </el-table-column>
        <el-table-column
          prop="individualIncomeTax"
          label="个人所得税">
        </el-table-column>
        <el-table-column
          prop="deduction"
          label="大病及考勤">
        </el-table-column>
        <el-table-column
          prop="unionFees"
          label="工会费">
        </el-table-column>
        <el-table-column
          prop="subtotalOfWithholding"
          label="扣发小计">
        </el-table-column>
        <el-table-column
          prop="netSalary"
          label="实发工资">
        </el-table-column>
      </el-table>
    </div>
    <div id="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page_params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page_params.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
    import {selectMessage} from '@/api/pay';
    export default {
        data() {
            return {
                tableHeight: document.body.clientHeight-230,
                loading: false,
                tableData: [],
                page_params: {
                    pageNum: 1,
                    pageSize: 20,
                    total: 100,
                    start_time: '2021-07',
                    end_time: '2021-07',
                },
                choseMonth: [],
            };
        },
        methods: {
            refresh_data(){
                this.loading = true;
                selectMessage(this.page_params).then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }else{
                        this.tableData = res.data.object;
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            handleSizeChange(val) {
                this.page_params.pageNum = 1;
                this.page_params.pageSize = val;
                this.refresh_data();
            },
            handleCurrentChange(val) {
                this.page_params.pageNum = val;
                this.refresh_data();
            },
            choseMonths(val){
                this.page_params.start_time = val[0];
                this.page_params.end_time = val[1];
            },
            search(){
                this.page_params.pageNum = 1;
                this.refresh_data();
            }
        },
        created(){
            this.choseMonth.push(new Date().getFullYear() + '-' + (new Date().getMonth()+1), new Date().getFullYear() + '-' + (new Date().getMonth()+1));
            this.page_params.start_time = new Date().getFullYear() + '-' + (new Date().getMonth()+1);
            this.page_params.end_time = new Date().getFullYear() + '-' + (new Date().getMonth()+1);
            this.refresh_data();
        }
    }
</script>
<style lang="scss">
    #onepay {
        #search_box {
            margin: 10px;
            .search-title {
                font-size: 14px;
                color: #909399;
            }
        }
        #table_box {
            margin: 10px;
        }
        #page_box {
            text-align: center;
        }
    }
</style>
